<link href="/zhcms/swiper/swiper-bundle.min.css" rel="stylesheet">
<script src="/zhcms/swiper/swiper-bundle.min.js"></script>

<style>
    .swiper {
    width: 100%;
    height: 320px;
    }

    .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

    .swiper-slide a{
        display:block;
        width:600px;
        height:320px;
        position: relative;
    }

    .swiper-slide a img{
        display:block;
        width:600px;
        height:320px;
    }

    /* 改变指示点颜色 */

    .swiper-pagination-bullet-active {
         /* 选中时的小圆点颜色 */
         background: #ffffff;
    }
    .swiper-pagination-bullet {
        background: #D4D4D4; /* 未选中时的小圆点颜色 */
    }

    /* 自定义左箭头 */
    .swiper-button-prev {
        color:#D4D4D4
    }
    
    /* 自定义右箭头 */
    .swiper-button-next {
         /* 选中时的小圆点颜色 */
         color: #D4D4D4;
    }


</style>

<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
    {volist name='swiper' id='vo'}
    <div class="swiper-slide">
        <a href="{$vo.url ? $vo.url : 'javascript:void(0)'}">
            <img src="{$vo.imgurl}"/>
        </a>
    </div>
    {/volist}

</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>

<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
    delay: 5000,
    disableOnInteraction: false,
    },
    pagination: {
    el: ".swiper-pagination",
    clickable: true,
    },
    navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
    },
});
</script>